<template>
  <div class="comment">
    <div class="comment-head">
      <div class="comment-headline">
        <i class="xzfont icon-comment"></i>
        <span> 评论</span>
      </div>
    </div>
    <div class="comment-wrap">
      <div class="submit">
        <div class="comment-row">
          <div class="comment-col">
            <div class="comment-textarea">
              <textarea
                class="textarea"
                cols="30"
                rows="10"
                maxlength="500"
                style="height: 121px; min-height: 121px"
                autocomplete="off"
                v-model="commentContent"
              >
              </textarea>
              <span class="word-count"> {{ commentContent.length }}/500 </span>
            </div>
          </div>
        </div>
        <div class="comment-row action">
          <button
            @click="handleComment"
            type="button"
            class="comment-send jb-blue"
          >
            <span>发送</span>
          </button>
        </div>
      </div>
      <div class="comments-container">
        <div
          class="comment-item"
          v-for="comment in commentList"
          :key="comment.id"
        >
          <div class="user-avatar">
            <img :src="comment.avatar" alt="avatar" />
          </div>
          <div class="comment-main">
            <div class="comment-row">
              <div class="comment-meta">
                <a class="nickname">
                  <strong>{{ comment.name }}</strong>
                </a>
                <span
                  style="margin-left: 0.5rem; font-size: 0.8rem"
                  class="time"
                  >{{ parseDateArrayToDateString(comment.createTime) }}</span
                >
              </div>
              <div class="comment-action">
                <a href="#">
                  <i class="xzfont icon-comment"></i>
                  <span class="action-count"></span>
                </a>
              </div>
            </div>
            <div class="content-expand">
              <p>{{ comment.commentContent }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCommentList, comment } from "@/api/comment";
import { useRoute } from "vue-router";
import { message } from "@/utils/message";
import { parseDateArrayToDateString } from "@/utils/common";

const commentContent = ref<string>("");

const commentList = ref<CommentData[]>([]);

const route = useRoute();

const handleComment = async () => {
  if (!localStorage.getItem("token")) {
    return message({
      type: "error",
      message: "登录之后才能评论",
      duration: 2000,
    });
  }
  if (!commentContent.value.trim()) {
    return message({
      type: "error",
      message: "评论内容不能为空",
      duration: 2000,
    });
  }
  if (route.query.postId) {
    const result = await comment({
      postId: +route.query.postId,
      commentContent: commentContent.value,
    });
    commentContent.value = "";
    if (result.data.code === 200) {
      message({
        type: "success",
        message: "评论成功",
        duration: 2000,
      });
      handleGetCommentList();
    }
  }
};

const handleGetCommentList = async () => {
  if (route.query.postId) {
    const result = await getCommentList(+route.query.postId);
    commentList.value = result.data.data;
    commentList.value.sort((a, b) => {
      return (
        //@ts-ignore
        new Date(...b.createTime).getTime() -
        //@ts-ignore
        new Date(...a.createTime).getTime()
      );
    });
  }
};

onMounted(async () => {
  await handleGetCommentList();
});
</script>

<style scoped lang="scss">
.comment {
  margin-top: 2rem;

  .comment-head {
    font-size: 0.8em;
    margin-bottom: 0.5rem;
    position: relative;

    .comment-headline {
      display: inline-block;
      vertical-align: middle;
      font-weight: 700;
      font-size: 20px;

      i {
        font-size: 22px;
      }
    }
  }

  .comment-wrap {
    .submit {
      display: flex;
      flex-direction: column;
      margin-top: 0;

      .comment-row {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        &.action {
          position: relative;
          margin-top: 1rem;
          margin-bottom: 1rem;
          margin-left: 3.5rem;
          align-items: center;
          justify-content: flex-end;
        }
      }

      .action {
        position: relative;

        button {
          border: none;
          display: inline-block;
          border-radius: 4px;
          vertical-align: middle;
          padding: 0.5rem 2rem;
          font-size: 1rem;
          text-align: center;
          font-weight: 400;
          box-shadow: var(--this-shadow);
          --this-shadow: none;
          text-shadow: 0 0 0;
          line-height: 1.44;
          transition: all 0.3s linear;

          &:hover {
            opacity: 0.8;
          }
        }
      }

      .comment-col {
        flex-direction: column-reverse !important;
        flex: 1;
        display: flex;
      }

      .comment-textarea {
        position: relative;
        display: inline-block;
        width: 100%;
        vertical-align: bottom;
        font-size: 14px;
        flex: 1;

        .textarea {
          background-color: var(--xz-card-bg);
          border-color: rgba(144, 147, 153, 0.31) !important;
          color: currentColor;
          display: block;
          resize: vertical;
          line-height: 1.5;
          box-sizing: border-box;
          width: 100%;
          font-size: inherit;
          border: 1px solid #dcdfe6;
          border-radius: 8px;
          transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
          border-radius: 12px !important;
          min-height: 100px !important;
          padding: 16px 16px 40px 16px !important;
          overflow: auto;
          border: 1px solid #dcdfe6;

          &:focus {
            outline: 0;
            border: var(--style-border-hover);
          }
        }

        .word-count {
          position: absolute;
          font-size: 12px;
          bottom: 5px;
          right: 10px;
          color: currentColor;
          background: transparent;
        }
      }
    }

    .comments-container {
      display: flex;
      flex-direction: column;
      min-height: 0;
      margin-top: 0.5rem;

      .comment-item {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        background: var(--xz-card-bg);
        transition: 0.3s;
        border-radius: 12px;
        padding: 1rem;
        border: none;
        border-bottom: var(--style-border-dashed);
        display: flex;
        flex-direction: row;
        word-break: break-all;

        .user-avatar {
          cursor: pointer;
          background-color: rgba(144, 147, 153, 0.13);
          width: 32px !important;
          height: 32px !important;
          border-radius: 32px !important;
          flex-shrink: 0;
          overflow: hidden;
          text-align: center;
          border-radius: 5px;
          box-shadow: var(--xz-shadow-border);
          margin-right: 16px !important;

          img {
            border-radius: 32px;
            width: 32px;
            height: 32px;
            border: var(--style-border-always);
          }
        }

        .comment-main {
          flex: 1;
          width: 0;

          .comment-row {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .comment-meta {
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .nickname {
                font-size: 1rem;
                line-height: 32px;
                color: inherit;
                text-decoration: none;

                strong {
                  -webkit-line-clamp: 1;
                  display: -webkit-box;
                  overflow: hidden;
                  -webkit-box-orient: vertical;
                  color: var(--xz-lighttext);
                }
              }
            }

            .comment-action {
              margin-left: 0.5rem;
              cursor: pointer;
              -webkit-user-select: none;
              padding: 0 12px 0 12px;
              transition: 0.3s;
              border-radius: 8px;
              text-decoration: none;
              display: flex;
              user-select: none;
              align-items: center;
              background-color: var(--xz-secondbg);
              border: var(--style-border-always);

              i {
                display: inline-block;
                height: 1em;
                width: 1em;
                color: var(--xz-lighttext);
                transition: 0.3s;
                font-size: 18px;
              }

              .action-count {
                fill: var(--xz-card-bg);
                color: var(--xz-lighttext);
                margin-left: 0.25rem;
                font-size: 0.9rem;
                height: 1.5rem;
                line-height: 1.5rem;
              }

              &:hover {
                background-color: var(--xz-lighttext);

                i,
                span {
                  color: var(--xz-card-bg) !important;
                }
              }
            }
          }

          .content-expand {
            margin-top: 0.5rem;
            overflow: hidden;
            position: relative;

            p {
              font-size: 15px;
              margin: 0;
            }
          }
        }
      }
    }
  }
}
</style>
